/**
* vchat operate
* Author: Feil.Wang
* Date: 2013.06 
*/

;(function(window,undefined){
	window.vchat = {
		setting : {
			lVideo : "",		//左侧视频
			rVideo : "",		//右侧视频
			isComplate : false	//动画是否完成
		},
		init : function(){
			this.setting.lVideo = $("#vchatDispLeft");
			this.setting.rVideo = $("#vchatDispRight");	

			this.setting.isComplate = true;
			this.scroll("#chatListWrap","bottom");
			this.scroll("#participantScroll");
			this.msgFn();
			this.textStyle();
		},
		vShow : function(callback){
			$("#tchatArea").animate({
				"height" : "352px"
			},500,function(){
				$("#vchatArea").animate({
					"opacity" : "1"
				},500,function(){
					if(callback){
						callback();
					}
				});
			});
			$("#chatListWrap").animate({
				"height" : "247px"
			},500,function(){
				vchat.scroll("#chatListWrap","bottom");
			});
		},
		//左侧视频先显示
		vLeftShow : function(callback){
			this.setting.lVideo.css({
				"left" : "215px"
			}).animate({
				"opacity" : "1"
			},500);
			this.setting.rVideo.css({
				"left" : "360px"
			});			
			this.vShow(callback);
		},
		//右侧视频先显示
		vRightShow : function(callback){
			this.setting.lVideo.css({
				"left" : "65px"
			});
			this.setting.rVideo.css({
				"left" : "215px"
			}).animate({
				"opacity" : "1"
			},500);
			this.vShow(callback);
		},
		//左侧视频加入
		leftJoin : function(callback){
			if(this.setting.isComplate){
				this.setting.isComplate = false;
				this.setting.rVideo.animate({
					"left" : "360px"
				},500,function(){
					vchat.setting.lVideo.animate({
					"opacity" : "1"
				},500,function(){
						if(callback){
							callback();
						}
						vchat.setting.isComplate = true;
					})
				});
			}
		},
		//右侧视频加入
		rightJoin : function(callback){
			if(this.setting.isComplate){
				this.setting.isComplate = false;
				this.setting.lVideo.animate({
					"left" : "65px"
				},500,function(){
					vchat.setting.rVideo.animate({
					"opacity" : "1"
				},500,function(){
						if(callback){
							callback();
						}
						vchat.setting.isComplate = true;
					})
				});
			}
		},
		//左侧视频退出
		leftExit : function(){
			if(this.setting.isComplate){
				this.setting.isComplate = false;
				this.setting.lVideo.animate({
					"opacity" : "0"
				},500,function(){
					vchat.setting.rVideo.animate({
						"left" : "215px"
					},500,function(){
						vchat.setting.isComplate = true;
					});
				});
			}
		},
		//右侧视频退出
		rightExit : function(){
			if(this.setting.isComplate){
				this.setting.isComplate = false;
				this.setting.rVideo.animate({
					"opacity" : "0"
				},500,function(){
					vchat.setting.lVideo.animate({
						"left" : "215px"
					},500,function(){
						vchat.setting.isComplate = true;
					});
				});
			}
		},
		//视频区域隐藏
		vHide : function(){
			$("#vchatArea").animate({
					"opacity" : "0"
				},500,function(){
				$("#tchatArea").animate({
					"height" : "630px"
				},500);
				vchat.setting.lVideo.animate({
					"opacity" : "0"
				},500)
				vchat.setting.rVideo.animate({
					"opacity" : "0"
				},500);
				$("#chatListWrap").animate({
					"height" : "525px"
				},500,function(){
					vchat.scroll("#chatListWrap","bottom");
				});
			});
		},
		scroll : function(obj,pos){
			var pane = $(obj);
			pane.jScrollPane({
				verticalDragMinHeight: 57,
				verticalDragMaxHeight: 57,
				mouseWheelSpeed: 10
			});
			var api = pane.data("jsp");
			if(pos == "top"){
				api.scrollToY(0);
			}else if(pos == "bottom"){
				var scrollAreaHeight = pane.find(".jspPane").height();		
				api.scrollToY(scrollAreaHeight);
			}
		},
		msgFn : function(){
			var $textInput = $("#textInput"),
				$clearTextBtn = $("#clearTextBtn"),
				$submitMsgBtn = $("#submitMsgBtn"),
				$selectUser = $("#selectChatUser"),
				$userListWrap = $("#userListWrap"),
				$userList = $("#userList");
			
			//输入框操作	
			$textInput.focus(function(){
				$(this).addClass("text-input-focus");
				$clearTextBtn.show();
			});
			$(document.body).click(function(e){
				var target = $(e.target);
				if(target.closest("#textInput").length == 0){
					$textInput.blur();
					$textInput.removeClass("text-input-focus");
					$clearTextBtn.hide();
				}
			});
			$clearTextBtn.click(function(e){	//清除文字
				e.stopPropagation();
				$textInput.val("");
				$textInput.focus();
			});
			
			//选择聊天对象
			$selectUser.click(function(e){
				e.stopPropagation();
				var liLength = $userListWrap.find("li").length;
				if(liLength>10){
					$userList.height(240);
				}	
				if($userListWrap.css("display") == "none"){
					$userListWrap.slideDown(300,function(){
						if(liLength>10){
							vchat.scroll("#userList");
						}
					});
				}else{
					return;
				}
			});
			
			$userList.find("li").click(function(){
				var uname = $(this).text();
				$("#selectedUser").text(uname).attr("title",uname);
				$userListWrap.slideUp(300);
			});
			
			$(document.body).click(function(e){
				var target  = $(e.target);
				if(target.closest("#userListWrap").length == 0){
					$userListWrap.slideUp(300);
				}
				
			});
			
			//发送消息
			$submitMsgBtn.click(function(){
				var msg = $textInput.val();
				var uName = $("#selectedUser").text();
				var oddClass = $("#chatMsgList").find("li:last").hasClass("odd")?"":"odd";
				var textStyle = $("#textInput").attr("style")
				if(!msg==""){
					$("#chatMsgList").append('<li class="'+oddClass+' role-myself">'
											+'	<div class="u-avatar">'
											+'		<img src="../static/images/u-avatar.png" />'
											+'		<a class="e-vcard" href="javascript:;"></a>'
											+'	</div>'
											+'	<dl>'
											+'		<dt>我对<span class="other-name">'+ uName +'</span>说</dt>'
											+'		<dd style="'+ textStyle +'">'+ msg +'</dd>'
											+'	</dl>'
											+'</li>')
					vchat.scroll("#chatListWrap","bottom");
				}else{
					setFocus();
				}
			});
			//内容为空时闪红提示
			function setFocus(c){
				if(typeof(c)=='undefined'){
					var c = 0;
				}
				if(c%2==0){
					$textInput.addClass("redFlash");
				}else{
					$textInput.removeClass("redFlash");
				}
				if(c<3){
					setTimeout(function(){setFocus(++c)},150);
				}
			}
			
			//交换名片
			$("#chatMsgList li").find(".u-avatar").live("mouseenter",function(){
				$(this).find(".e-vcard").show();
			});
			$("#chatMsgList li").find(".u-avatar").live("mouseleave",function(){
				$(this).find(".e-vcard").hide();
			});
			
		},
		textStyle : function(){
			var $selectColor = $("#selectColor"),
				$colorArea = $("#colorArea"),
				$underlinePost = $("#underlinePost"),
				$boldPost = $("#boldPost"),
				$italicPost = $("#italicPost"),
				$textInput = $("#textInput");
				
			if($.cookie('textStyle')!==null){
				$textInput.attr("style",$.cookie('textStyle'));
				
				if($textInput.css("text-decoration")=="underline"){
					$underlinePost.attr("checked",true);
				}else{
					$underlinePost.attr("checked",false);
				}
				if($textInput.css("font-weight")=="bold" || $textInput.css("font-weight")=="700"){
					$boldPost.attr("checked",true);
				}else{
					$boldPost.attr("checked",false);
				}
				if($textInput.css("font-style")=="italic"){
					$italicPost.attr("checked",true);
				}else{
					$italicPost.attr("checked",false);
				}
				$selectColor.css("background-color",$textInput.css("color"));
			}
			
			$underlinePost.click(function(){
				if(this.checked){
					$textInput.css("text-decoration","underline");
					setCookie();
				}else{
					$textInput.css("text-decoration","none");
					setCookie();
				}
			});
			
			$boldPost.click(function(){
				if(this.checked){
					$textInput.css("font-weight","bold");
					setCookie();
				}else{
					$textInput.css("font-weight","normal");
					setCookie();
				}
			});
			
			$italicPost.click(function(){
				if(this.checked){
					$textInput.css("font-style","italic");
					setCookie();
				}else{
					$textInput.css("font-style","normal");
					setCookie();
				}
			});

			$(".text-color-wrap").click(function(){
				$colorArea.show();
			});
			
			$colorArea.find("a").click(function(e){
				var curColor = $(this).attr("data-color");
				$selectColor.css("background-color",curColor);
				$textInput.css("color",curColor);
				setCookie();
				$colorArea.hide();
				e.stopPropagation();
			});
			$(document.body).click(function(e){
				var target  = $(e.target);
				if(target.closest(".text-color-wrap").length == 0){
					$colorArea.hide();
				}
			});
			function setCookie(){
				var styleVal = $textInput.attr("style");
				$.cookie('textStyle', styleVal, { expires: 30, path: '/' });  
			}
			
		}
	}

})(window);

/**
 * Cookie plugin
 *
 */
jQuery.cookie = function(name, value, options) {
    if (typeof value != 'undefined') { // name and value given, set cookie
        options = options || {};
        if (value === null) {
            value = '';
            options.expires = -1;
        }
        var expires = '';
        if (options.expires && (typeof options.expires == 'number' || options.expires.toUTCString)) {
            var date;
            if (typeof options.expires == 'number') {
                date = new Date();
                date.setTime(date.getTime() + (options.expires * 24 * 60 * 60 * 1000));
            } else {
                date = options.expires;
            }
            expires = '; expires=' + date.toUTCString(); // use expires attribute, max-age is not supported by IE
        }
        var path = options.path ? '; path=' + options.path : '';
        var domain = options.domain ? '; domain=' + options.domain : '';
        var secure = options.secure ? '; secure' : '';
        document.cookie = [name, '=', encodeURIComponent(value), expires, path, domain, secure].join('');
    } else { // only name given, get cookie
        var cookieValue = null;
        if (document.cookie && document.cookie != '') {
            var cookies = document.cookie.split(';');
            for (var i = 0; i < cookies.length; i++) {
                var cookie = jQuery.trim(cookies[i]);
                // Does this cookie string begin with the name we want?
                if (cookie.substring(0, name.length + 1) == (name + '=')) {
                    cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
                    break;
                }
            }
        }
        return cookieValue;
    }
};

$(function(){
	vchat.init();

	$("#vRightShow").click(function(){
		vchat.vRightShow();
	});	
	$("#vRightJoin").click(function(){
		vchat.rightJoin();
	});
	$("#vRightExit").click(function(){
		vchat.rightExit();
	});
	/****/
	$("#vLeftShow").click(function(){
		vchat.vLeftShow();
	});
	$("#vLeftJoin").click(function(){
		vchat.leftJoin();
	});
	$("#vLeftExit").click(function(){
		vchat.leftExit();
	});
	
	$("#videoHide").click(function(){
		vchat.vHide();
	});
	
	$("#recBtn").toggle(function(){
		$(this).attr("class","rec-stop-btn");
	},function(){
		$(this).attr("class","rec-btn");
	});
})